<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid #ff0000;

        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        var myCanvas = document.querySelector("#canvas");
        var ctx = myCanvas.getContext("2d");
        ctx.moveTo(100,100);
        ctx.lineTo(400,100);

        // [5,10] 数组是用来描述实线虚线的长度的
        // ctx.setLineDash([5,10,15]);//设置虚线，传一个数组，[0]=实线的长度，[1]=虚线的长度,[2]=实线的长度。依次循环
        // ctx.setLineDash([5,10]);//设置虚线，传一个数组，[0]=实线的长度，[1]=虚线的长度。依次循环
        ctx.setLineDash([20,10]);//设置虚线，传一个数组，[0]代表的实线和虚线的长度。依次循环

        
        console.log(ctx.getLineDash());//获取虚线的列表顺序，重复循环的那段 实线虚线的宽度
        //设置虚线偏移量(负向右偏移，正向左偏移)
        ctx.lineDashOffset = 20;

        ctx.stroke();
       




    </script>
</body>
</html>